<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2021-12-01 16:36:31
 * @LastEditTime: 2021-12-09 16:36:42
-->
<!-- 分页器 -->
<template>
  <div class="pagePublicStyle" v-if="value && value.total > 0">
    <div class="totalCount" v-if="showPageTotal">
      当前第 {{ value.current }} 页， 当前第 {{ (value.current - 1) * value.rows + 1 }} 条到第
      {{ Math.min(value.current * value.rows, value.total) }}
      条， 共 {{ value.total }} 条
    </div>
    <Page
      v-if="value.options"
      :total="value.total"
      placement="top"
      :pageSize="value.rows"
      :current="value.current"
      :page-size-opts="value.options"
      @on-change="onPageChange"
      @on-page-size-change="onPageSizeChange"
      show-elevator
      show-total
      :show-sizer="Boolean(value.options.length)" />
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      value: Object,
      showPageTotal: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    watch: {
      value: {
        handler(n) {
          if (n) {
            if (n.total == null) {
              this.$set(this.value, 'total', 0)
            }
            if (n.current == null) {
              this.$set(this.value, 'current', 1)
            }
            if (n.rows == null) {
              this.$set(this.value, 'rows', 50)
            }
            if (n.options == null) {
              this.$set(this.value, 'options', [10, 20, 30, 40, 50])
            }
          }
        },
        deep: true
      }
    },
    methods: {
      //分页触发
      onPageChange(num) {
        if (this.value.current != num) {
          this.value.current = num
          this.$emit('change')
        }
      },
      //改变每页条数触发
      onPageSizeChange(rows) {
        if (this.value.rows != rows) {
          this.value.rows = rows
          this.value.current = 1
          this.$emit('change')
        }
      }
    },
    mounted() {
      if (this.value) {
        if (this.value.total == null) {
          this.$set(this.value, 'total', 0)
        }
        if (this.value.current == null) {
          this.$set(this.value, 'current', 1)
        }
        if (this.value.rows == null) {
          this.$set(this.value, 'rows', 50)
        }
        if (this.value.options == null) {
          this.$set(this.value, 'options', [10, 20, 30, 40, 50])
        }
      }
    }
  }
</script>
<style lang="scss" scoped></style>
